<header class="topbar">
    <nav class="navbar top-navbar navbar-expand-md navbar-light">

        <!--页面左上角的logo部分-->
        <div class="navbar-header">
            <a class="navbar-brand" href="${ctxPath}/">
                <b>
                    <i class=" wi wi-solar-eclipse"></i>
                </b>
                <span>Guns管理系统</span>
            </a>
        </div>

        <!--页面顶部的导航条-->
        <div class="navbar-collapse">

            <!--顶部导航条左侧（收缩菜单按钮和站内消息通知）-->
            <ul class="navbar-nav mr-auto mt-md-0 ">

                <!--隐藏和显示sidebar-->
                <li class="nav-item"><a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="ti-menu"></i></a></li>
                <li class="nav-item"><a class="nav-link sidebartoggler hidden-sm-down text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="icon-arrow-left-circle"></i></a></li>

                <!--通知-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-email"></i>
                        <div class="notify"><span class="heartbit"></span> <span class="point"></span></div>
                    </a>
                    <div class="dropdown-menu mailbox animated bounceInDown" aria-labelledby="2">
                        <ul>
                            <li>
                                <div class="drop-title">您有1条通知</div>
                            </li>
                            <li>
                                <div class="message-center">
                                    <a href="https://gitee.com/stylefeng/guns" target="_blank">
                                        <div class="user-img">
                                            <img src="${avatar}" alt="user" class="img-circle"> <span class="profile-status online pull-right"></span>
                                        </div>
                                        <div class="mail-contnet">
                                            <h5>Hi！Guns 旗舰版发布了！</h5>
                                            <span class="time">2018-11-20 12:00</span>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <a class="nav-link text-center" href="javascript:void(0);"> <strong>查看所有通知</strong> <i class="fa fa-angle-right"></i> </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <!--主题切换-->
                <li class="nav-item">
                    <a class="nav-link text-muted waves-effect waves-dark" href="javascript:void(0)" onclick="Feng.showRightSideBar()">
                        <i class="mdi mdi-settings"></i>
                    </a>
                </li>

            </ul>

            <!--顶部导航条右侧（profile和多语言按钮） -->
            <ul class="navbar-nav my-lg-0">

                <!--用户信息按钮-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img
                            src="${avatar}" alt="user" class="profile-pic"/></a>
                    <div class="dropdown-menu dropdown-menu-right animated flipInY">
                        <ul class="dropdown-user">
                            <li>
                                <div class="dw-user-box">
                                    <div class="u-img"><img src="${avatar}" alt="user"></div>
                                    <div class="u-text">
                                        <h4>${name!}</h4>
                                        <p class="text-muted">${email!}</p><a href="${ctxPath}/mgr/user_info" class="btn btn-rounded btn-danger btn-sm">个人信息</a></div>
                                </div>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="${ctxPath}/mgr/user_info"><i class="ti-user"></i> 编辑资料</a></li>
                            <li><a href="${ctxPath}/mgr/user_chpwd"><i class="ti-settings"></i> 修改密码</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="${ctxPath}/logout"><i class="fa fa-power-off"></i> 退出</a></li>
                        </ul>
                    </div>
                </li>

                <!--多语言选择-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i
                            class="flag-icon flag-icon-cn"></i></a>
                    <div class="dropdown-menu  dropdown-menu-right animated flipInY">
                        <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-cn"></i> Chinese</a>
                        <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-us"></i> English</a>
                    </div>
                </li>

            </ul>
        </div>
    </nav>
</header>
